<template>
  <div class="table_component">
    <OdcFormRender
      ref="searchRef"
      label-width="90px"
      :form-config="searchFormConfig"
      :form-data="searchForm"
      @cascaderChange="cascaderChange"
      @selectChange="selectChange"
      v-bind="$attrs"
    >
      <template>
        <div slot="tabsSlot">
          <el-tabs v-model="type" @tab-click="tabClick">
            <el-tab-pane
              v-for="item in tags"
              :key="item.value"
              :label="item.label"
              :name="item.value"
              :lazy="true"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div slot="search" class="btnWrap">
          <el-button type="primary" size="medium" @click="search"
            >查询</el-button
          >
          <el-button size="medium" @click="handleReset">重置</el-button>
        </div>
      </template>
    </OdcFormRender>
    <div class="tableBack">
      <div class="btnSlot_sty">
        <div>
          <el-button
            type="success"
            size="small"
            plain
            icon="el-icon-plus"
            @click="openDrawer"
            >添加</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-upload"
            plain
            size="small"
            @click="headleImport"
            >导入</el-button
          >
          <el-button type="" size="small" @click="exportList">导出</el-button>
        </div>
        <div>
          <el-button
            type="primary"
            size="small"
            @click="$refs.formTableRef.request()"
            >查询</el-button
          >
          <el-button size="small" @click="$refs.formTableRef.handleReset()"
            >重置</el-button
          >
        </div>
      </div>
      <OdcTable
        :loading="loading"
        :column-list="column"
        :tableData="list"
        :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
        rowKey="id"
        :is-close-tip="true"
        :show-index-column="true"
        :show-checkbox="true"
        :page="params"
        @currentChange="currentChange"
        @selectionChange="selectionChange"
      >
        <el-table-column
          label="操作"
          align="center"
          width="120px"
          fixed="right"
          slot="action"
        >
          <template slot-scope="scope">
            <div class="tableBtn">
              <el-button
                type="text"
                size="mini"
                @click="openDrawerDetail(scope.row)"
                >详情</el-button
              >
              <el-button type="text" size="mini" @click="openDrawer(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" size="mini" @click="handleDel(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </OdcTable>
    </div>
    <AddDrawer
      ref="addDrawer"
      size="900px"
      :drawTitle="title"
      @closeDrawer="handleClose"
    >
      <div class="form_content">
        <OdcFormRender
          ref="formRef"
          label-width="85px"
          :form-config="addFormConfig"
          :form-data="addFormData"
          :rules="addRules"
          :disabled="disabled"
          :uploadFileApi="fileUpload"
          :gutter="30"
        >
        </OdcFormRender>
        <div slot="operate" class="footer">
          <el-button
            class="btn"
            @click="handleClose"
            :loading="loading"
            :disabled="loading"
            >取消</el-button
          >
          <el-button
            class="btn"
            type="primary"
            @click="save"
            :loading="loading"
            :disabled="loading"
            >确定</el-button
          >
        </div>
        <!-- <div v-if="showLoading" class="loadingBox">
          <img src="@/assets/images/jiaz_pic.png" class="jzzImg" alt="" />
          <div class="loadingTips">正在加载数据</div>
        </div> -->
        <CustomNoData v-if="showLoading"></CustomNoData>
      </div>
    </AddDrawer>
    <ImportFile
      ref="importFile"
      :title="improtTitle"
      :import-url="importUrl"
      :requestUrl="breedTemplateUplaod"
      @clickConfirm="headleImportFile"
      @headleDownLoad="headleDownLoadTep"
    />
  </div>
</template>

<script>
import {
  getList,
  getInfo,
  edit,
  add,
  remove,
  breedTemplateUplaod,
} from "@/api/technocracy";
import { column, searchFormConfig, addFormConfig, addRules } from "./data";
import { getBlobFile, fileUpload } from "@/api/common";
import { downloadBlobFile, exportFile } from "@/utils/index";

export default {
  name: "DictionaryManagement",
  components: {},
  data() {
    return {
      showLoading: false,
      loading: false,
      disabled: false,
      // 列字段
      column,
      // 查询表单配置
      type: "1",
      searchFormConfig,
      searchForm: {
        SPES: [],
        statScale: "",
      },
      params: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 新增/编辑表单配置
      addFormConfig,
      addFormData: {
        ruleName: "",
        ruleScore: "",
        ruleDescribe: "",
        open: "1",
      },
      fileUpload,
      addRules,
      // 新增/编辑标题
      title: "添加",
      tags: [
        {
          label: "数据查询",
          value: "1",
        },
        {
          label: "年度对比",
          value: "2",
        },
      ],
      list: [],
      breedTemplateUplaod,
      importUrl: "", // 导入地址
      improtTitle: "", // 导入标题
    };
  },
  watch: {
    // 监听时间范围选择数据
    "searchForm.DATE_RANGE": {
      handler(val) {
        const [StartDate, EndDate] = val || [];
        this.searchForm.originTimeStartStr = StartDate || "";
        this.searchForm.originTimeEndStr = EndDate || "";
      },
    },
  },
  async mounted() {
    this.getList();
  },
  methods: {
    tabClick(row) {},
    // 打开新增/编辑
    openDrawer(row) {
      this.disabled = false;
      if (row.id) {
        this.title = "编辑";
        // this.getInfo(row.id);
      } else {
        this.title = "添加";
        this.addFormData.id = "";
      }
      this.$refs.addDrawer.open();
    },
    // 打开详情弹窗
    openDrawerDetail(row) {
      this.title = "详情";
      // this.getInfo(row.id);
      this.disabled = true;
      this.$refs.addDrawer.open();
    },
    // 列表数据
    // getList() {
    // this.loading = true;
    // const params = {
    //   pageNum: this.params.pageNum,
    //   pageSize: this.params.pageSize,
    //   {...this.searchForm },
    // };
    // list(params)
    //   .then((res) => {
    //     if (res.code == 200) {
    // this.params.total = Number(res.total) || 0;
    // this.list = res.rows;
    // if (this.params.pageNum > 1 && res?.rows?.length === 0) {
    //   this.params.pageNum--;
    //   this.getList();
    // }
    // }
    // })
    // .finally(() => {
    //   this.loading = false;
    // });
    // },
    getList() {
      const params = {
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
        statScale: this.searchForm.statScale,
        times: this.searchForm.times1,
      };
      this.params.total = 5;
      this.list = [
        {
          id: "1781253733071708161",
          openid: "112",
          wxName: "李四",
          avatar: null,
          gender: 1,
          xyCode: null,
          city: null,
          phone: "123456238901",
          enterprise: null,
          wxPro: null,
          realName: null,
          birthday: null,
          industryAddedWaterAct: 23,
          industryAddedWaterPre: 25,
          longitude: "ex",
          latitude: "ip",
          children: [
            {
              id: "1781259533071708161",
              openid: "112",
              wxName: "李四",
              avatar: null,
              gender: 1,
              xyCode: null,
              city: null,
              phone: "123456238901",
              enterprise: null,
              wxPro: null,
              realName: null,
              birthday: null,
              longitude: "ex",
              latitude: "ip",
            },
          ],
        },
        {
          id: "1781254273834860546",
          openid: "111",
          wxName: "张三",
          avatar: null,
          gender: 2,
          xyCode: null,
          city: null,
          phone: "12345678901",
          enterprise: null,
          wxPro: null,
          realName: null,
          birthday: null,
          longitude: "107.682507",
          latitude: "23.175039",
        },
        {
          id: "1781255653383421953",
          openid: "oQyId0XiUEr6nu_FSeberx81Igv0",
          wxName: "微信用户",
          avatar:
            "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
          gender: 0,
          xyCode: null,
          city: null,
          phone: "18693123406",
          enterprise: null,
          wxPro: null,
          realName: null,
          birthday: null,
          longitude: "108.94878",
          latitude: "34.22259",
        },
        {
          id: "1783045902971764738",
          openid: "oQyId0c4A77QnSljDvYplOCzQAd8",
          wxName: "微信用户",
          avatar:
            "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
          gender: 0,
          xyCode: null,
          city: null,
          phone: "13944806296",
          enterprise: null,
          wxPro: null,
          realName: null,
          birthday: null,
          longitude: null,
          latitude: null,
        },
        {
          id: "1783085532983586817",
          openid: "oQyId0W5jTl9lJrBAaqe0tEn53Jg",
          wxName: "微信用户",
          avatar:
            "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
          gender: 0,
          xyCode: null,
          city: null,
          phone: "15829076401",
          enterprise: null,
          wxPro: null,
          realName: null,
          birthday: null,
          longitude: null,
          latitude: null,
        },
      ];
    },
    selectionChange(val) {
      console.log(val, "selectionChange");
    },
    // 搜索
    search() {
      this.getList();
    },
    // 重置
    handleReset() {
      this.$refs.searchRef.resetForm();
      this.params.pageNum = 1;
      this.$nextTick(() => {
        this.search();
      });
    },
    // 导出
    exportList() {
      const params = {
        scale: this.searchForm.scale,
        times: this.searchForm.times2,
      };
      exportFile("/water/rain/compare/export", params, "降雨量分析");
    },
    // 页数
    currentChange(size) {
      this.params.pageNum = size;
      this.getList();
    },
    //获取详情
    getInfo(id) {
      this.showLoading = true;
      getInfo(id)
        .then((res) => {
          if (res.code == 200) {
            this.addFormData = res.data;
          }
        })
        .finally(() => {
          this.showLoading = false;
        });
    },
    // 新增/编辑保存
    save() {
      this.$refs.formRef.submitForm(() => {
        this.loading = true;
        let url = this.addFormData.id
          ? "/honorRules/update"
          : "/honorRules/add";
        let method = this.addFormData.id ? "put" : "post";
        save(url, method, this.addFormData)
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.handleClose();
              this.$refs.formTableRef.request();
              this.loading = false;
            }
          })
          .finally((err) => {
            this.loading = false;
          });
      });
    },
    // 关闭新增/编辑
    handleClose() {
      this.$refs.formRef.resetForm();
      this.$refs.addDrawer.closed();
    },
    // 删除
    handleDel(row) {
      this.$confirm("是否删除该条数据?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          remove(row.id).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.$refs.formTableRef.request();
            }
          });
        })
        .finally(() => {});
    },
    // 导入弹窗
    headleImport() {
      this.$refs.importFile.init();
      this.improtTitle = "专家管理导入";
      this.importUrl =
        process.env.VUE_APP_BASE_API + "/breed/typeSource/import";
    },
    // 导入提交
    headleImportFile(val, data) {
      if (!val) {
        // 关闭弹窗并刷新列表
        this.$refs.importFile.resetForm();
        this.getList();
      } else {
        this.$refs.formTableRef.request();
      }
    },
    // 下载模板
    headleDownLoadTep() {
      getBlobFile(
        "/platform/specialistDetails/exportTemplate",
        {},
        "post"
      ).then((res) => {
        downloadBlobFile(res, "xlsx", "专家管理模板");
      });
    },
    // 下载导入失败数据
    headleLoadFailData(id) {
      const param = {
        clientid: id,
      };
      getBlobFile(
        "/platform/specialistDetails/exportImportLogsExcel",
        param,
        "post"
      ).then((res) => {
        downloadBlobFile(res, "xlsx", "专家管理导入失败数据");
      });
    },
    // 级联选择返回的数据
    cascaderChange(row) {
      this.searchForm.serviceDomain =
        row
          .map((item) => {
            return item.value;
          })
          .join(",") || "";
    },
    // 下拉选择返回的数据
    selectChange(row) {
      if (row.prop == "SPES") {
        this.searchForm.statScale = row.val.join(",") || "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.table_component {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  .form-components {
    background: #fff;
    padding: 20px 20px 0;
    border-radius: 4px;
    ::v-deep .el-form {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        margin-bottom: 20px !important;
        .el-form-item__label {
          color: #000;
        }
      }
    }
    ::v-deep .el-col {
      min-height: 56px;
    }
  }
}
.tableBack {
  // margin-top: 15px;
  background-color: #fff;
  padding: 0 15px 15px;
  .btnSlot_sty {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
}
</style>
